<template>
<!--component/chooseCity/chooseCity.wxml-->
<picker mode="multiSelector" :range="objectMultiArray" :value="multiIndex" range-key="value" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange">
  <slot></slot>
</picker>
</template>

<script>
// component/chooseCity/chooseCity.js
import util from "../../utils/util";

export default {
  data() {
    return {
      objectMultiArray: [],
      multiIndex: [0, 0]
    };
  },

  components: {},
  props: {},
  beforeMount: function () {
    // 在组件实例进入页面节点树时执行
    util.request('zhuanti.php', {
      action: 'get_city'
    }).then(e => {
      let list = e.data.data;
      this.objectMultiArray.push(list);
      this.objectMultiArray.push(list[0].citylist);
      this.setData({
        objectMultiArray: this.objectMultiArray
      });
    });
  },
  destroyed: function () {// 在组件实例被从页面节点树移除时执行
  },
  methods: {
    bindMultiPickerColumnChange(e) {
      var data = {
        objectMultiArray: this.objectMultiArray,
        multiIndex: this.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value; // 当第一列改变时，渲染出第二列

      switch (e.detail.column) {
        case 0:
          data.objectMultiArray[1] = data.objectMultiArray[0][e.detail.value].citylist; // 第一列改变时,初始化第二列值为第一个选项

          data.multiIndex[1] = 0;
          break;
      }

      this.setData(data);
    },

    bindMultiPickerChange(e) {
      this.$emit('chooseCity', {
        detail: {
          cityCode: this.objectMultiArray[1][e.detail.value[1]].code,
          city: this.objectMultiArray[1][e.detail.value[1]].value
        }
      });
    }

  }
};
</script>
<style>
/* component/chooseCity/chooseCity.wxss */
</style>